<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app"></div>

<script>
    //全局组件,
    //1.局部入口组件的声明（声子）
    var App ={
        data(){
            return{

            }
        },
        template:`
            <div>我是入口组件</div>

        `
    };

    new Vue({
        el:'#app',
        data(){
            return{

            }
        },
        //2.挂载子组件（挂子）
        components:{
            App
        },
        //3.父组件直接可以使用（用子）
        template:`
         <App />

        `,
    });
</script>
</body>
</html>